<template>
  <div class="header" ref="header">
    <div class="standard-container">
      <div class="standard-grid --padding-horizontal --auto-rows">
        <div class="header__container">
          <p v-if="single">
            <span @click="goBack"></span>
            <span>{{single}}</span>
          </p>
           <ul v-else>
              <li v-for="(tab,index) in tabs" :key="index">
               <nuxt-link :to="tab.link" :class="{ '--active': tab.link === $route.path }">{{tab.name}}</nuxt-link>
             </li>
           </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import {Prop, Watch} from "vue-property-decorator";
  import {State} from "vuex-class";
  import {SkinInterface} from "../../interfaces/PageInterface";
  import {Actions, Store} from "../../enums/Store";
  @Component({})
  export default  class CommonNav extends Vue {
    @State(Store.Skin) skinValue:SkinInterface[Store.Skin]
    @Prop({required:false})single:string


      private tabs=[
        {
          name:'最新',
          link:'/latest',
          value:'0',
          background:'#054547'
       },
        {
          name:'推荐',
          link:'/recommend',
          value:'1',
          background: '#5F5636'
        },
        {
          name:'搜索',
          link:'/search',
          value:'2',
          background:'rgb(116, 3, 73)'
        },
        {
          name:'我的',
          link:'/my',
          value:'3',
          background:'#000'
        },
      ]

    private goBack(){
       history.go(-1)
    }

    private created(){
      if(process.browser){
        if(localStorage.getItem('themesBg')){
          this.$store.dispatch(Actions.GetSkin,localStorage.getItem('themesBg'))
        }else{
          this.$store.dispatch(Actions.GetSkin,'0')
        }
      }
    }

    private mounted(){
      this.tabs.map((item,index)=>{
        if(item.value==this.skinValue){
          this.$refs.header.style.background=item.background
        }
      })
    }


  }

</script>
<style lang="scss">

  @include component(header){
       position: fixed;
       top: 0;
       left: 0;
       right: 0;

     @include part(container){
      grid-column: 1 / span 2;

      ul{
        display: flex;
        justify-content: flex-end;

        li{
          padding:$mobile-row-2 0.5rem;
          text-align: center;
          $gutter: get-config(mobile, gutter);
          $size: 4;
          width: calc((100% + #{$gutter}) / #{$size} - #{$gutter / 4});


           a{
             display: inline-block;
             width: 100%;
             @include baseline($font-size-1,$skip-lines:2,$auto-lines:false);
             color: $color-fff;
             position: relative;

             &:before{
               position: absolute;
               left: -10px;
               top: 15px;
               width:18px;
               height: 18px;
               content: "";

             }
           }

          @for $i from 1 through 4 {

            &:nth-child(n + #{$i}){
              a{

                &:before{
                  background: url('../../assets/imgs/icons/icon-#{$i}.svg') no-repeat;
                  background-size: cover;

                }
                &:hover{
                  border-bottom: 3px solid $color-fff;
                  &:before{
                    background: url('../../assets/imgs/icons/icon-#{$i}-active.svg') no-repeat;
                    background-size: cover;
                  }
                }

                @include option(active){
                  border-bottom: 3px solid $color-fff;
                  &:before{
                    background: url('../../assets/imgs/icons/icon-#{$i}-active.svg') no-repeat;
                    background-size: cover;
                  }
                }
              }
            }

          }
        }
      }

       p{
         padding:$mobile-row-2 0.5rem;
         text-align: center;
         color: $color-fff;
         position: relative;

        span{
          &:nth-of-type(1){
            display: inline-block;
            content: '';
            width: 32px;
            height: 32px;
            background: #ff03ab;
            position: absolute;
            left: 0;
            top: 20px;
            background: url("../../assets/imgs/icons/return.svg") no-repeat ;
            background-size: cover;
          }
        }
       }

    }

  }

</style>
